<template>
  <div>
    <el-row>
      <el-col :span="12" id="gantt" class="block">
        <h4>series type custom</h4>
        <div id="ganttChart" class="chart"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import echarts from 'echarts';
import 'echarts/theme/dark';
export default {
  methods: {
    ganttInit() {
      const charts = echarts.init(
        document.getElementById('ganttChart'),
        'dark'
      );
      const colors = ['#25a5a4', '#f56c6c'];
      const data = [
        {
          name: '总时间',
          itemStyle: {
            color: colors[0],
          },
          value: [
            0,
            new Date('2020-08-16T00:00:00'),
            new Date('2020-08-17T00:00:00'),
          ],
        },
        {
          name: '任务1',
          itemStyle: {
            color: colors[1],
          },
          value: [
            0,
            new Date('2020-08-16T15:00:00'),
            new Date('2020-08-16T20:00:00'),
          ],
        },
      ];
      const xAxisInterval = 2 * 3600 * 1000;
      const option = {
        grid: {
          left: '8%',
          right: '5%',
          top: 70,
        },
        tooltip: {
          formatter(params) {
            return (
              params.marker +
              params.name +
              ':' +
              params.value[1].toLocaleString() +
              '~' +
              params.value[2].toLocaleString()
            );
          },
        },
        xAxis: {
          type: 'time',
          position: 'top',
          maxInterval: xAxisInterval,
          min(val) {
            return val.min - xAxisInterval;
          },
          max(val) {
            return val.max + xAxisInterval;
          },
          axisLabel: {
            formatter(val, index) {
              const fmt =
                new Date(val).toLocaleDateString() +
                '\n' +
                new Date(val).toLocaleTimeString();
              return fmt;
            },
            rotate: -60,
          },
        },
        yAxis: {
          type: 'category',
          data: ['一周任务'],
          inverse: true,
          triggerEvent: true,
        },
        series: [
          {
            type: 'custom',
            renderItem(params, api) {
              const categoryIndex = api.value(0);
              const stime = api.value(1);
              const etime = api.value(2);
              const startPosition = api.coord([stime, categoryIndex]);
              const endPosition = api.coord([etime, categoryIndex]);
              const height = 36;
              const x = startPosition[0];
              const y = startPosition[1] - height / 2;
              const width = endPosition[0] - startPosition[0];

              return {
                type: 'rect',
                shape: {
                  x,
                  y,
                  width,
                  height,
                },
                style: api.style({ text: data[params.dataIndex].name }),
              };
            },
            encode: {
              x: [1, 2],
              y: 0,
            },
            data,
          },
        ],
      };
      charts.setOption(option);
    },
  },
  mounted() {
    this.ganttInit();
  },
};
</script>
<style scoped>
.block {
  height: 400px;
  display: flex;
  flex-direction: column;
}
.block > .chart {
  flex-grow: 1;
}
</style>

